<template>
  <view class="">
    <view class="xzBox">
      <u-form labelPosition="left" :model="formData" ref="form1" label-width="90">
        <u-form-item label="收货人" prop="userInfo.name" ref="item1" borderBottom>
          <u-input v-model="formData.name" border="none" placeholder="姓名"></u-input>
        </u-form-item>
        <u-form-item label="手机号" prop="userInfo.phone" ref="item1" borderBottom>
          <u-input v-model="formData.phone" border="none" placeholder="手机号"></u-input>
        </u-form-item>
        <u-form-item label="省市区" prop="proAddress" borderBottom>
          <pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
            <view class="reBox">
              <text :style="regionName ? 'color: #000000;' : 'color: #A9A9A9;'">{{ regionName || "选择省市区" }}</text>
              <u-icon name="arrow-down" color="#C9CDD8"></u-icon>
            </view>
          </pick-regions>
        </u-form-item>
        <u-form-item label="详细地址" prop="address">
          <u-input v-model="formData.address" border="none" placeholder="请输入详细地址"></u-input>
        </u-form-item>
      </u-form>
    </view>
    <view class="defaultAddress">
      <text>设置为默认地址</text>
      <u-switch v-model="formData.isDefault" activeColor="#2ccf97" :activeValue="true" :inactiveValue="false"></u-switch>
    </view>
    <view class="bottomBox">
      <u-button text="保存" @click="saveSubmit" color="#2ccf97"></u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
//@ts-ignore
import pickRegions from "../../components/pick-regions/pickRegions.vue";
import { save } from "../../api/home";
import { useStore } from "../../stores/counter";
const formData = ref({
  name: "",
  isDefault: true,
  address: "",
  phone: "",
  province: "",
  city: "",
  area: "",
  id: "",
  street: "",
});
const region = ref([{ name: "" }]);
const defaultRegionCode = ref("330108");
const regionName = computed(() => region.value.map((item) => item.name).join(" "));
const addAddresInfo = useStore().editAddressInfo;
if (addAddresInfo) {
  formData.value.name = addAddresInfo[0];
  formData.value.phone = addAddresInfo[1];
  formData.value.address = addAddresInfo[2];
  // if (JSON.parse(formData.value?.street)) {
  //   region.value = JSON.parse(formData.value?.street);
  //   defaultRegionCode.value = JSON.parse(formData.value?.street)[2].code;
  // }
}

const handleGetRegion = (e: any) => {
  e.forEach((item: any) => {
    if (item.childs) {
      delete item.childs;
    }
  });
  formData.value.street = JSON.stringify(e);
  formData.value.province = e[0].name;
  formData.value.city = e[1].name;
  formData.value.area = e[2].name;
  region.value = e;
};
const saveSubmit = async () => {
  let errorMessage = "";
  const phonePattern = /^[1][3-9][0-9]{9}$/;
  console.log(formData.value);
  if (!formData.value.name) {
    errorMessage = "姓名不能为空";
  } else if (!formData.value.phone || !phonePattern.test(formData.value.phone)) {
    errorMessage = "请正确填写手机号";
  } else if (!formData.value.province) {
    errorMessage = "地址不能为空";
  } else if (!formData.value.address) {
    errorMessage = "详细地址不能为空";
  } else {
    errorMessage = "";
  }
  if (errorMessage) {
    // 显示错误消息
    uni.$u.toast(errorMessage);
  } else {
    await save({
      FormId: "BD_CommonContact",
      Data: {
        FormId: "BD_CommonContact",
        Model: {
          FName: formData.value.name,
          FCompanyType: "BD_Customer",
          FMobile: formData.value.phone,
          FBizAddress: formData.value.province + formData.value.city + formData.value.area + formData.value.address,
          FIsDefaultConsignee: formData.value.isDefault,
        },
      },
    });
    uni.redirectTo({
      url: "/pages/myPage/myShippingAddress",
    });
  }
};
</script>

<style lang="less" scoped>
.xzBox {
  background: #ffffff;
  margin-top: 20rpx;
  padding: 28rpx 40rpx;
}
.reBox {
  display: flex;
  justify-content: space-between;
}
.defaultAddress {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
  background: #fff;
  height: 90rpx;
  align-items: center;
  padding: 0 20rpx;
}
</style>
